<template>
  <div :class="[type, modelValue === value ? 'active1':'']"
       :style="{width}"
       class="button"
       @click="btnClick">
    <slot/>
  </div>
</template>

<script lang="ts"
        setup>
let emits = defineEmits<{
  (e: 'update:modelValue', v: any): void
}>()

let props = withDefaults(defineProps<{
  // 选中值
  modelValue?: any
  // 绑定值
  value?: any
  // 宽度
  width?: string
  type?: 'submit' | 'info' | 'active' | 'cancel'
}>(), {
  type: 'info'
})

function btnClick(): void {
  if (props.value !== props.modelValue)
    emits('update:modelValue', props.value)
}

</script>

<style lang="less"
       scoped>
.button {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}

.info {
  width: 140px;
  border: 1px solid #f5f5f5;
}

.submit {
  width: 180px;
  color: white;
  background-color: @xtxColor;
  font-size: 16px;
}

.active {
  .info();

  &:hover, &.active1 {
    border-color: @xtxColor;
  }
}

.cancel {
  width: 140px;
  color: white;
  background-color: #ccc;
}
</style>